<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
input { background: transparent }
input + div { color: pink }
#i1:read-only { background-color: green }
#i2:read-write { background-color: green }
</style>
<input id="i1" type="text"></input>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<input id="i2" type="text" readonly></input>
<div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<script>
description("Use descendant invalidation sets for :read-only and :read-write pseudo classes.")

var transparent = "rgba(0, 0, 0, 0)";
var green = "rgb(0, 128, 0)";

shouldBe("getComputedStyle(i1, '').backgroundColor", "transparent");
shouldBe("getComputedStyle(i2, '').backgroundColor", "transparent");

i1.offsetTop; // Force recalc.
i1.setAttribute("readonly", "");

if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");

shouldBe("getComputedStyle(i1, '').backgroundColor", "green");

i2.offsetTop; // Force recalc.
i2.removeAttribute("readonly");

if (window.internals)
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");

shouldBe("getComputedStyle(i2, '').backgroundColor", "green");
</script>
